<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>人员管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- card -->
		<el-card>
			<div class="box">
				<div class="top">
					<el-tooltip class="item" effect="dark" content="人员管理" placement="top-start">
						<el-button>人员管理</el-button>
					</el-tooltip>
				</div>
			</div>
			项 目 人 员 列 表
			<el-row :gutter="500">
				<el-col :span="15">
					<!-- 搜索按钮-->
					<el-input placeholder="请输入内容">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<!-- 添加按钮 -->
					<el-button type="primary" @click="goAddsPage">添加人员</el-button>
				</el-col>
			</el-row>

			<el-table :data="adminList" style="width: 100%">

				<el-table-column type="expand">
					<!-- <template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="姓名">
								<span>{{ props.row.name }}</span>
							</el-form-item>
							<el-form-item label="邮箱">
								<span>{{ props.row.email }}</span>
							</el-form-item>
							<el-form-item label="手机号">
								<span>{{ props.row.phone }}</span>
							</el-form-item>
							<el-form-item label="所属项目">
								<span>{{ props.row.belong }}</span>
							</el-form-item>
							<el-form-item label="职务">
								<span>{{ props.row.duty }}</span>
							</el-form-item>
						</el-form>
					</template> -->
				</el-table-column>
				<el-table-column label="姓名" prop="name" width="300px">
				</el-table-column>
				<el-table-column label="邮箱" prop="email">
				</el-table-column>
				<el-table-column label="手机号" prop="phone">
				</el-table-column>
				<el-table-column label="所属项目" prop="belong">
				</el-table-column>
				<el-table-column label="职务" prop="duty">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button-group>
							<!-- 修改按钮-->
							<el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
							<!-- 删除按钮 -->
							<el-button type="danger" icon="el-icon-delete" @click="removeById(scope.row.id)"></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo1.pageNum"
			 :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo1.pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="total" background></el-pagination>  -->
		</el-card>
		<!-- 修改学习笔记的对话框 -->
		<el-dialog title="修改人员信息" :visible.sync="EditDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="handleEditFrom" :rules="handleEditFromRules" ref="handleEditFromRef" label-width="70px">
				<el-form-item label="姓名">
					<el-input v-model="handleEditFrom.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="handleEditFrom.email"></el-input>
				</el-form-item>
				<el-form-item label="电话号">
					<el-input v-model="handleEditFrom.phone"></el-input>
				</el-form-item>
				<el-form-item label="所属项目">
					<el-input v-model="handleEditFrom.belong"></el-input>
				</el-form-item>
				<el-form-item label="职务" prop="duty">
					<el-select v-model="handleEditFrom.duty" placeholder="请选择职务">
						<el-option label="项目经理" value="项目经理"></el-option>
						<el-option label="项目成员" value="项目成员"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="EditDialogVisible = false">取 消</el-button>
				<el-button type="primary" class="btnAdd" @click="editadminInfo()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		created() {
			this.getAdminList();
		},
		data() {
			return {
				queryInfo: {
					//和后端QueryInfo实体的属性一致
					query: '',
					pageNum: 1,
					pageSize: 5,
				},
				queryInfo1: {
					//和后端QueryInfo实体的属性一致
					id: JSON.parse(window.sessionStorage.getItem('user')).id,
					pageNum: 1,
					pageSize: 5,
				},
				adminList: [], //人员信息列表
				total: 0, //总记录数
				EditDialogVisible: false, //控制修改人员信息对话框的显示与隐藏
				handleEditFrom: {
					name: '',
					email: '',
					phone: '',
					belong:'',
					duty:'',
				},
				handleEditFromRules: {
					email: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					phone: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					belong:[{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					duty:[{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ]
				},
			}
		},
		methods: {
			async getAdminList() {
				const {
					data: resString
				} = await this.$http.get("admin", {
					params: this.queryInfo1
				}); //②接收后台返回的string数据： ①访问后台
				this.adminList = resString.adminList;
			},
			async showEditDialog(id) {
				this.EditDialogVisible = true;
				const {
					data: resString2
				} = await this.$http.get('getupdateadmin?id=' + id);
				this.handleEditFrom = resString2;
			},
			// 监听 编辑学习笔记对话框的关闭事件
			editDialogClosed() {
				// 表单内容重置为空
				this.$refs.handleEditFromRef.resetFields()
			},
			editadminInfo() {

				this.$refs.handleEditFromRef.validate(async valid => {
					var _this = this;
					if (valid) {
						//发起修改用户的数据请求
						const {
							data: res
						} = await this.$http.get('editadmin', {
							params: this.handleEditFrom
						});

						if (res !== "ok") return this.$message.error('修改用户失败');
					}
					//关闭对话框
					this.EditDialogVisible = false;
					//刷新数据列表
					this.getAdminList();
					//提示修改成功
					this.$message.success('修改用户成功');
				})

			},
			goAddsPage() {
				this.$router.push('/user_adds');
			},
			/* handleSizeChange(newSize) {
				//console.log('newSize:',newSize);
				this.queryInfo1.pageSize = newSize;
				this.getAdminList();
			},
			handleCurrentChange(newPage) {
				//console.log('newPage:',newPage);
				this.queryInfo1.pageNum = newPage;
				this.getAList();
			}, */
			//// 点击确认 删除该人员
			async removeById(id) {
				//弹框询是否确定删除
				const confirmResult = await this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}, ).catch(err => err)
				//如果确定删除，则返回值为字符串confirm
				//如果取消删除，则返回值为字符串cancel
				//console.log(confirmResult)
				if (confirmResult !== "confirm") {
					return this.$message.info('已取消删除');
				}
				const {
					data: spa
				} = await this.$http.delete("deleteadmin?id=" + id)
				if (spa !== "ok") {
					return this.$message.error('删除成员失败！');
				}
				this.$message.success('删除成员成功！');
				this.getAdminList();

			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
